import { message } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import styles from "./OnlineRechargePopup.module.less";

export default defineComponent({
  setup(props, { expose }) {
    const router = useRouter();
    const state = reactive({
      isShow: false,
      rechargeAmount: '', //充值金额
    })
    // 打开弹窗
    const open = () => {
      state.isShow = true;
    }
    // 确认
    const submit = () => {
      console.log(!state.rechargeAmount, state.rechargeAmount)
      if (!state.rechargeAmount) {
        message.error('请输入100的整数倍金额')
      } else {
        if (Number(state.rechargeAmount) % 100 === 0) {
          router.push(`/transactionRecords?rechargeAmount=${state.rechargeAmount}`)
        } else {
          message.error('请输入100的整数倍金额')
        }
      }
    }
    expose({
      open,
    })
    return () => (
      <div class={styles['OnlineRechargePopup-floating']} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles.title}>在线充值</div>
          <div class={styles.container}>
            <div class={styles['recharge-box']}>
              <span>充值金额</span>
              <div class={styles['input-box']}>
                <input v-model={state.rechargeAmount} />
              </div>
              <span>元</span>
            </div>
          </div>
          <div class={styles.footer}>
            <div class={styles['submit-btn']} onClick={() => { submit() }}>确认</div>
            <div class={styles['cancel-btn']} onClick={() => { state.isShow = false }}>取消</div>
          </div>
        </div>
      </div>
    )
  }
})